<template>
	<div class="endLive">
		<div class="endLiveCont">
			<image src="@/static/image/bg.png" mode="" class="bjImg"></image>
			<div class="endLiveCenter">
				<!-- <div class="endLiveCont_back" @click="backBtn()">
					<image src="@/static/image/left.png" mode=""></image> <span>观众列表</span>
				</div> -->
				<u-navbar leftText="观众列表" @leftClick="backBtn" leftIconColor="#1D2129"  bgColor="transparent">
			        </u-navbar>
				<!-- <div class="goHome">
					返回首页
				</div> -->
			</div>
		</div>

		<div class="scrollView">
			<div class="prizeDraw_top_title">
				<input type="text" placeholder="请输入用户名称" v-model="params.nickname"
					placeholder-class="zj-placeholder-class" @search='couponEvent'>
				<div class="inputSeach" @click='couponEvent()'>
					<image src="@/static/image/sousuo.png" mode=""></image>
				</div>
			</div>
			<scroll-view @scrolltolower="scrolltolower" class="scrollView_box" :scroll-y="true"
				:scroll-with-animation="true">
				<div class="liveUserItems" v-for="(ite,idx) in audienceList" :key="idx">
					<div class="liveUserItems_top">
						<div class="liveUserItems_top_left">
							<image :src="ite.avatar" mode=""></image>
						</div>
						<div class="liveUserItems_top_right">
							<div class="liveUserItems_top_right_title ex">
								{{ite.nickname || '游客'}}
							</div>
							<div class="liveUserItems_top_right_price">
								消费金额：<span>{{ite.amount | amountFilter}}元</span>
							</div>
							<div class="liveUserItems_top_right_address">
								{{ite.address}}
							</div>
							<div class="liveUserItems_top_right_time">
								加入时间：{{ite.joinTime}}
							</div>
							<div class="liveUserItems_top_right_time">
								观看时长：{{ite.liveWatchDuration | formatTime}}
							</div>
						</div>
					</div>
					<div class="liveUserItems_bottom">
						<div class="liveUserItems_bottom_lable_title">
							标签：
						</div>
						<div class="liveUserItems_bottom_lable_items_cont">
							<div class="liveUserItems_bottom_lable_items" v-for='(items,index) in ite.tagNames'
								:key="index" :style="{'background':items.tagBg}">
								<span :style="{'color':ite.tagTextColor}">{{items.name}}</span>
							</div>
						</div>
					</div>
				</div>


				<div class="listSpace listSpaceCont" v-if="audienceList.length <= 0 && loading">
					<list-space></list-space>
				</div>

				<div class="zj_space">

				</div>

			</scroll-view>

		</div>
	</div>
</template>

<script>
	export default {
		filters: {
			formatDate(v) {
				if (v == 0) {
					return '-'
				}
				const value = v * 1000
				const data = new Date(value);
				const month = data.getMonth() + 1;
				const day = data.getDate();
				const year = data.getFullYear();
				const hours = data.getHours();
				const minutes = data.getMinutes();
				const seconds = data.getSeconds();
				const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return formattedTime;
			},
			formatTime(v) {
				if (v == 0) {
					return '-'
				}
				let hours = Math.floor(v / 3600);
				let minutes = Math.floor((v % 3600) / 60);
				let seconds = v % 60;
				const formattedTime = `${hours<10?'0'+hours:hours}:${minutes<10?'0'+minutes:minutes}:${seconds<10?'0'+seconds:seconds}`;
				return formattedTime;
			},
			amountFilter(v) {
				if (!v) return '0.00'
				return Number(v) / 100
			}
		},
		data() {

			return {
				params: {
					dataType: "all",
					liveId: "",
					nickname: "",
					page: 1,
					pageSize: 10,
					tagIds: [],
					userStatus: 2,
				},
				audienceList: [],
				total: 0,
				loading: false
			}
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.audienceList = []
			this.loading = false
			this.getListAudience()
		},
		onLoad(opt) {
			if (opt.liveId) {
				this.params.liveId = opt.liveId
			}
			this.getListAudience()
		},
		methods: {
			couponEvent(){
				
				this.$utils.throttle((res)=>{
					this.params.page = 1
					this.audienceList = []
					this.loading = false
					this.getListAudience()
				},800)
			},
			// 点击确定后，该活动将在 10s 后自动开奖，是否要提前开奖？
			scrolltolower(e) {
				if (this.audienceList.length < this.total) {
					this.params.page++
					this.getListAudience()
				} else {
					uni.showToast({
						title: '已到底',
						icon: 'none'
					})
				}
				console.log('e.detail.scrollTop', e.detail.scrollTop)
			},
			// 获取直播商品数据
			async getListAudience() {
				const {
					data
				} = await this.$request(this.$Api.listAudience, this.params, "post")
				this.loading = true
				if (!data.data) return
				this.audienceList = this.audienceList.concat(data.data)
				this.total = data.total
				uni.stopPullDownRefresh()
			},
			backBtn() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
.listSpaceCont{
	padding-top: 55%;
}
	.endLive {
		width: 100%;
		height: 100vh;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden;
		background: #fff !important;
	}

	.prizeDraw_top_title {
		width: 100%;
		height: 96rpx;
		font-size: 28rpx;
		color: #464C5B;
		text-align: left;
		font-weight: 500;
		line-height: 64rpx;
		padding: 0 32rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		position: relative;
		padding-bottom: 32rpx;

		input {
			width: 100%;
			height: 100%;
			border: 1rpx solid #979797;
			border-radius: 16rpx;
			padding: 0 124rpx 0 24rpx;
			box-sizing: border-box;
			font-size: 24rpx;

		}

		.inputSeach {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 56rpx;
			top: 6rpx;
		}

	}

	.scrollView_box {
		height: calc(100vh - 312rpx);
	}

	.scrollView {
		height: calc(100vh - 138rpx);
		background: red;
		position: absolute;
		top: 138rpx;
		width: 688rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-left: 32rpx;
		padding: 32rpx 20rpx;
		box-sizing: border-box;
		padding-bottom: 200rpx;

	}

	.endLiveCont {
		width: 100%;
		height: 100vh;
		position: relative;
		padding: 30rpx 0;
		box-sizing: border-box;
		color: #fff;
		overflow: hidden;



		.endLiveCenter {
			width: 100%;
			height: 1624rpx;
			position: absolute;
			left: 0;
			top: 0;
			padding: 30rpx 0;
			box-sizing: border-box;
			overflow: hidden;
		}

		.bjImg {
			width: 100%;
			height: 1624rpx;
			position: absolute;
			left: 0;
			top: 0;
		}

		.endLiveCont_back {
			width: 100%;
			height: 80rpx;
			float: left;
			position: relative;

			image {
				width: 58rpx;
				height: 58rpx;
				float: left;
				position: absolute;
				top: 10rpx;
			}

			span {
				font-size: 28rpx;
				margin-left: 72rpx;
				color: #1D2129;
				line-height: 80rpx;
			}
		}



		.goHome {
			width: 480rpx;
			height: 80rpx;
			background: #295EFF;
			border-radius: 40rpx;
			margin-top: 224rpx;
			margin: 224rpx auto;
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			line-height: 80rpx;
		}
	}

	.liveUserItems {
		width: 100%;
		min-height: 30rpx;
		border-bottom: 2rpx solid #AEC0FE;
		padding: 28rpx;
		box-sizing: border-box;

		.liveUserItems_top {
			width: 100%;
			display: flex;
			font-size: 28rpx;
			color: #1D2129;

			.liveUserItems_top_left {
				width: 76rpx;
				height: 76rpx;

				image {
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
				}
			}

			.liveUserItems_top_right {
				margin-left: 18rpx;
				position: relative;
				width: calc(100% - 80rpx);

				.liveUserItems_top_right_price {
					font-size: 20rpx;
					color: #657180;
					position: absolute;
					top: 0;
					right: 0;

					span {
						font-size: 28rpx;
						color: #FF5A5F;
					}
				}

				.liveUserItems_top_right_title {
					width: 200rpx;



				}

				.liveUserItems_top_right_address {
					margin-top: 8rpx;
					font-size: 20rpx;
				}

				.liveUserItems_top_right_time {
					margin-top: 8rpx;
					font-size: 20rpx;
					color: #657180;

					span {
						margin-left: 32rpx;
					}
				}
			}
		}

		.liveUserItems_bottom {
			font-size: 20rpx;
			color: #8C8C8C;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			.liveUserItems_bottom_lable_title{
              min-width: 70rpx;
			}
			
			.liveUserItems_bottom_lable_items_cont {
				min-width: calc(100% - 120rpx);
				overflow-x: auto;
				white-space: nowrap;
				.liveUserItems_bottom_lable_items {
					padding: 0 24rpx;
					margin-right: 12rpx;
					height: 34rpx;
					// background: #00DDBA;
					border-radius: 21rpx;
					display: inline-block;
					line-height: 34rpx;
					color: #000;
					font-size: 24rpx;
					min-width: 100rpx;
					span{
								display: inline-block;
					}
					
				}
			
				
			}

		}

	}

	.liveUserItems:last-child {
		border: none !important;
	}
</style>
